<template>
	<view class="">
		<view class="box" v-if="mode=='shop'">
			<view class="check" v-if="box">
				<checkbox :value="String(Data.id)" :checked="checked"/>
			</view>
			<image :src="Data.goods_info.image"></image>
			<view class="shop-info" :class="[box==true?'shop-info-active':'']">
				<view class="">
					<view class="name">
						{{Data.goods_info.title}}
					</view>
					<view class="introduce">
						<text>{{Data.goods_info.description}}</text>
					</view>
				</view>
				<view class="shop-info-bto">
					<view class="price">
						￥{{parseFloat(Data.sale_price)}}
					</view>
					<slot></slot>
				</view>
			</view>
		</view>
		<view class="box" v-if="mode=='yanhua'">
			<view class="check" style="margin:  0rpx 20rpx 0rpx 30rpx;" v-if="box">
				<checkbox :value="String(Data.id)" :checked="checked"/>
			</view>
			<image style="width: 200rpx; height: 200rpx;" :src="Data.goods_info.image"></image>
			<view class="shop-info2"  :class="[box==true?'shop-info-active':'']">
				<view class="">
					<view class="name">
						{{Data.goods_info.title}}
					</view>
				</view>
				<view class="shop-info-bto">
					<view class="price">
						￥{{parseFloat(Data.sale_price)}}
					</view>
					<slot></slot>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {cartChange} from "../../../api/shop.js"
	export default{
		data(){
			return {
				shop:true,
				marginLeft:0,
				num:0,
			}
		},
		props:{
			mode:{ //组件模式，数据列表为空模式，购物车数据为空模式
				type:String,
				default:'list'
			},
			Data:{
				type:Object,
				default:{}
			},
			checked:{
				type:Boolean,
				default:false
			},
			yanhua:{
				type:Boolean,
				default:true
			},
			box:{
				type:Boolean,
				default:false
			}
		},
		created() {
			let  that=this
			this.num=this.Data.num;
			console.log(that.Data)
			this.num=this.Data.cart_num
		},
		methods:{
			//加
			add(){
				this.num++
				cartChange({
					goods_id:this.Data.goods_info.id,
					op_type:0,
					cart_num:this.num
				}).then(res=>{
					
				})
			},
			//减
			reduce(){
				if(this.num>0){
					this.num--
					cartChange({
						goods_id:this.Data.goods_info.id,
						op_type:1,
						cart_num:this.num
					}).then(res=>{
						
					})
				}else{
					return
				}
			}
		}
	}
</script>

<style lang="less">
	.box{
		width: 100%;
		display: flex;
		margin: 20rpx 0;
		.check{
			display: flex;
			align-items: center;
			margin: 0 40rpx;
			/deep/ .uni-checkbox-input-checked{
				background-color: #007AFF;
				color: #FFFFFF !important;
			}
		}
		image{
			width: 200rpx;
			height: 266rpx;
		}
		/deep/ .uni-checkbox-input{
			border-radius: 60rpx;
		}
		.shop-info-active{
			width: 50% !important;
		}
		.shop-info{
			width: 66%;
			padding: 40rpx 0 40rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name{
				font-size: 28rpx;
				font-weight: bolder;
				margin-bottom: 5rpx;
			}
			.introduce{
				width: 90%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				text {
					font-size: 25rpx;
					display: inline;
				}
			}
			.shop-info-bto{
				width: 94%;
				display: flex;
				justify-content: space-between;
				.price{
					font-size: 28rpx;
					font-weight: bolder;
				}
				.operation{
					width: 55%;
					height: 44rpx;
					display: flex;
					justify-content: space-around;
					.add{
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 36rpx;
						font-size: 60rpx;
						border: 1px solid #5C6B7E;
						border-radius: 6rpx;
					}
					.num{
						width: 44rpx;
						height: 44rpx;
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.reduce{
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						font-size: 44rpx;
						border: 1px solid #5C6B7E;
						border-radius: 6rpx;
					}
				}
			}
		}
		.shop-info2{
			width: 66%;
			padding: 10rpx 0 10rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name{
				font-size: 30rpx;
				font-weight: bolder;
				margin-bottom: 5rpx;
			}
			.introduce{
				width: 90%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				text {
					font-size: 25rpx;
					display: inline;
				}
			}
			.shop-info-bto{
				width: 94%;
				display: flex;
				justify-content: space-between;
				.price{
					font-size: 28rpx;
					font-weight: bolder;
					color: #FD1470;
				}
				.operation{
					width: 55%;
					height: 44rpx;
					display: flex;
					justify-content: space-around;
					.add{
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 36rpx;
						font-size: 60rpx;
						border: 1px solid #5C6B7E;
						border-radius: 6rpx;
					}
					.num{
						width: 44rpx;
						height: 44rpx;
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.reduce{
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						font-size: 44rpx;
						border: 1px solid #5C6B7E;
						border-radius: 6rpx;
					}
				}
			}
		}
	}
</style>
